<template>
	<view id="main">
		<block v-if="stage=='loading'">
			<view class="main">
			    <view id="title">
			        人生重开模拟器<br>
			        <text style="font-size:1rem; font-weight:normal;">加载中...</text>
			    </view>
			</view>
		</block>
		<block v-if="stage=='index'">
			<view class="main">
			    <button class="achievement" @click="viewAchievement">成就</button>
			    <button class="specialthanks" @click="viewSpecialThanks">特别感谢</button>
			    <button class="themeToggleBtn" @click="skinToBlack">黑</button>
			    <button class="save" @click="saveLife">Save</button>
			    <button class="load" @click="loadLife">Load</button>
			    <view class="mainIndexPageTitle">
			        人生重开模拟器<br>
			        <view style="font-size:1rem; font-weight:normal;">这垃圾人生一秒也不想呆了</view>
			    </view>
			    <button class="restart mainbtn" @tap="restart()"><span class="iconfont">&#xe6a7;</span>立即重开</button>
			    
			</view>
		</block>
		<block v-if="stage=='talent'">
			<view class="main">
			    <view class="head" style="font-size: 1.6rem">天赋抽卡</view>
			    <button class="mainbtn" v-if="talentCtrl.showMainBtn" @tap="selectTalents()" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);padding:25rpx;">10连抽！</button>
			    <view id="talents" class="selectlist" v-if="talentCtrl.showSelectList">
					<view v-for="(item, i) in talentCtrl.talentList" v-bind:key="item.id" @tap="selectTalent(item)" :class="item.itemCls" class="item">{{item.name}} （{{item.description}}）</view>
				</view>
			    <button  class="mainbtn" v-if="talentCtrl.showNext" @tap="talentNext()">{{talentCtrl.nextBtnText}}</button>
			</view>
		</block>
		<block v-if="stage=='property'">
			<view class="main">
			    <view class="head" style="font-size: 1.6rem">
			        <view>调整初始属性</view>
			        <view id="total" style="font-size:1rem; font-weight:normal;">可用属性点：{{lifeProperty.remainTotal}}</view>
				</view>
			    <view id="propertyAllocation" class="propinitial">
					
					<view  v-for="(item, i) in lifeProperty.propertyGroupsList" :key="item.type" class="propinitial-list propinitial-li">
						<text class="">{{item.name}}</text>
						<span class="iconfont propbtn" @tap="subProperty(item)">&#xe6a5;</span>
						<input :value="item.value.get()" type="number" class="propinput" readonly />
						<span class="iconfont propbtn" @tap="addProperty(item)">&#xe6a6;</span>
					</view>
					
				</view>
			    <view class="selectlist" id="talentSelectedView">
					<view>已选天赋</view>
				    <view   v-for="(item, i) in talentCtrl.selectTalentList" :key="item.id" :class="['grade'+item.grade+'b']">
						{{item.name}}({{item.description}})
					</view>
				</view>
			    <view class="btn-area">
			        <button id="random" class="mainbtn" @tap="randomProperty">随机分配</button>
			        <button id="start" class="mainbtn" @tap="lifeStart">开始新人生</button>
			    </view>
			</view>
		</block>
		<block v-if="stage=='trajectory'">
			<view class="main">
			    <view id="lifeProperty" class="lifeProperty">
					<view><view>颜值</view><view>{{trajectory.lifeProperty.CHR}}</view></view>
					<view><view>智力</view><view>{{trajectory.lifeProperty.INT}}</view></view>
					<view><view>体质</view><view>{{trajectory.lifeProperty.STR}}</view></view>
					<view><view>家境</view><view>{{trajectory.lifeProperty.MNY}}</view></view>
					<view><view>快乐</view><view>{{trajectory.lifeProperty.SPR}}</view></view>
				</view>
			    <scroll-view id="lifeTrajectory" class="lifeTrajectory" scroll-y="true" :scroll-top="trajectoryScrollTop" @tap="lifeTrajectoryClick">
					<view v-for="(item, i) in trajectory.contentList" :key="i" class="lifeTrajectory-content-li">
						<view>
							<view class="trajectory-age">{{item.age}}岁：</view>
							<view class="trajectory-desc">
								<view v-for="(c,ic) in item.content" :key="ic" class="trajectory-desc-content" >
									<view v-if="c.type =='TLT'">天赋【{{c.name}}】发动：{{c.description}}</view>
									<view v-if="c.type =='EVT'">{{c.description}} <view>{{c.postEvent}}</view></view>
									<view v-if="c.type =='achievement'">解锁成就：【{{c.name}}】</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			    <view class="btn-area">
			        <button id="auto" class="mainbtn" v-if="!trajectory.isEnd" @tap="autoTrajectory(1000)">自动播放</button>
			        <button id="auto2x" class="mainbtn" v-if="!trajectory.isEnd" @tap="autoTrajectory(500)">自动播放2x</button>
			        <button id="summary" class="mainbtn" v-if="trajectory.isEnd" @tap="lifeSummary">人生总结</button>
			        <button id="domToImage" class="mainbtn" v-if="trajectory.isEnd" @tap="showLifeInImage">人生轨迹</button>
			    </view>
			    <view class="domToImage2wx" v-if="trajectory.showLifeImage">
			        <image src="" id="endImage" />
			    </view>
			</view>
		</block>
		<block v-if="stage=='summary'">
			<view class="main">
			    <view class="head">人生总结</view>
			    <view id="judge" class="judge">
			        <view v-for="(item,ix) in summaryJudge.judgeShowResultList" :key="ix"  :class="[item.showCls,'judge-li']"><text>{{item.discription}}：</text><text>{{item.value}} {{item.judge}}</text></view>
			    </view>
			    <view class="head" style="height:auto;">天赋，你可以选一个，下辈子还能抽到</view>
			    <view id="talents" class="selectlist" style="flex: 0 1 auto;">
					<view   v-for="(item, i) in canExtendTalentList" :key="item.id" :class="[selectedExtendTalentId == item.id?'selected':'', 'grade'+item.grade+'b']" @tap="summarySelectTalent(item)">
						{{item.name}}({{item.description}}) 
					</view>
			    </view>
			    <button id="again" class="mainbtn" @tap="gameAgain"><text class="iconfont" >&#xe6a7;</text>再次重开</button>
			</view>
		</block>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				stage:"loading",
				"talentCtrl":{
					"talentList":[],
					"selectTalentList":[],
					"showMainBtn":true,
					"showNext":false,
					"showSelectList":false,
					"canNext":false,
					"nextBtnText":""
				},
				"lifeProperty":{
					totalMax:0,
					"setedTotal":0,
					"remainTotal":0,
					propertyGroups:{},
					propertyGroupsList:{}
				},
				"trajectory":{
					isEnd:false,
					lifeProperty:{},
					contentList:[],
					showLifeImage:false
				},
				summaryJudge:{},
				lastExtendTalent:null,
				canExtendTalentList:[],
				selectedExtendTalentId:null,
				trajectoryScrollTop:0
			}
		},
		onReady() {
			let that = this;
			getApp().globalData.lifeRestart.app.addListener("lifeGameAgain",function(){
				that.talentCtrl = {
					"talentList":[],
					"selectTalentList":[],
					"showMainBtn":true,
					"showNext":false,
					"showSelectList":false,
					"canNext":false,
					"nextBtnText":""
				};
				that.trajectory={
					isEnd:false,
					lifeProperty:{},
					contentList:[],
					showLifeImage:false
				};
			});
			getApp().globalData.lifeRestart.app.addListener("stageChange",function(stage){
				that.stage = stage;
			});
			getApp().globalData.lifeRestart.app.addListener("selectTalentChange",function(selectTalentSet){
				let tlist = [];
				for(let sts of selectTalentSet){
					tlist.push(sts);
				}
				that.talentCtrl.selectTalentList = tlist;
			});
			getApp().globalData.lifeRestart.app.addListener("lifePropertyChange",function(lifeProperty){
				that.lifeProperty = lifeProperty;
				
			});
			
			getApp().globalData.lifeRestart.app.addListener("trajectory.lifePropertyChange",function(lifeProperty){
				that.trajectory.lifeProperty = lifeProperty;
			});
			getApp().globalData.lifeRestart.app.addListener("trajectory.contentChange",function(contentList){
				that.trajectory.contentList = contentList;
				if(contentList.length > 0){
					that.trajectory.isEnd = contentList[contentList.length -1].isEnd;
				}
				that.$nextTick(function(){
					const query = uni.createSelectorQuery().in(this);
					
					let traCont = query.select("#lifeTrajectory");
					//console.log("query_traCont111",traCont);
					traCont.fields({
					  size: true,
					  scrollOffset: true
					}, data => {
					  
					  that.trajectoryScrollTop = data.scrollHeight;
					  
					}).exec();
					
					
					// let traCont = that.$el.querySelector("#lifeTrajectory");
					// traCont.scrollTop = traCont.scrollHeight;
					
				})
				
			});
			
			getApp().globalData.lifeRestart.app.addListener("selectedExtendTalentChange",function(selectExTalent){
				that.selectedExtendTalentId = selectExTalent.id;
			});
			
			getApp().globalData.lifeRestart.app.reload();
			
		},
		methods: {
			restart(){
				getApp().globalData.lifeRestart.app.restart();
			},
			selectTalents(){
				let rapp = getApp().globalData.lifeRestart.app;
				let selRet = rapp.getCurrentTalentTextInfo();
				this.talentCtrl.canNext = selRet.canNext;
				this.talentCtrl.nextBtnText = selRet.nextText;
				this.talentCtrl.showMainBtn = false;
				let tList = rapp.talentRandom();
				for(let tt of tList){
					tt.baseCls = 'grade'+tt.grade+'b';
					tt.selectedCls = 'selected';
					
					tt.selected = false;
					tt.itemCls = tt.baseCls + " " + (tt.selected?tt.selectedCls:"");
				}
				
				this.talentCtrl.talentList = tList;
				this.talentCtrl.showSelectList = true;
				this.talentCtrl.showNext = true;
			},
			selectTalent(item){
				let rapp = getApp().globalData.lifeRestart.app;
				let ss = !item.selected;
				let selRet = null;
				if(ss){
					// 选中
					selRet = rapp.addTalent(item.id);
				}else{
					// 取消选择
					selRet = rapp.removeTalent(item.id);
				}
				if(selRet.success){
					this.talentCtrl.canNext = selRet.canNext;
					this.talentCtrl.nextBtnText = selRet.nextText;
				}else{
					if(selRet.errorMsg){
						uni.showToast({
							title:selRet.errorMsg,
							icon:"error",
							duration:1000
						});
					}
					return;
				}
				
				item.selected = ss;
				item.itemCls = item.baseCls +" "+ (item.selected?item.selectedCls:"");
				
			},
			talentNext(){
				if(!this.talentCtrl.canNext){
					return;
				}
				getApp().globalData.lifeRestart.app.nextStage();
			},
			subProperty(item){
				item.value.sub();
			},
			addProperty(item){
				item.value.add();
			},
			randomProperty(){
				getApp().globalData.lifeRestart.app.randomProperty();
			},
			lifeStart(){
				if(getApp().globalData.lifeRestart.app.lifeStart()){
					this.lifeTrajectoryClick();
				}
				
			},
			lifeTrajectoryClick(){
				if(this.trajectory.isEnd) return;
				getApp().globalData.lifeRestart.app.doTrajectoryNext();
			},
			autoTrajectory(tick){
				getApp().globalData.lifeRestart.app.auto(tick);
			},
			showLifeInImage(){
				uni.showToast({
					icon: "none",
					title:"开发中",
					duration:2000
				})
			},
			lifeSummary(){
				this.summaryJudge = getApp().globalData.lifeRestart.app.getLifeSummaryJudge();
				
				this.lastExtendTalent= getApp().globalData.lifeRestart.app.getLastExtendTalent();
				this.canExtendTalentList = getApp().globalData.lifeRestart.app.getCanExtendTalentList();
				getApp().globalData.lifeRestart.app.nextStage();
			},
			
			gameAgain(){
				getApp().globalData.lifeRestart.app.againGame();
			},
			summarySelectTalent(talent){
				getApp().globalData.lifeRestart.app.selectedExtendTalent(talent.id);
				
			},
			viewAchievement(){
				uni.navigateTo({
					url:"./achievement"
				})
			},
			viewSpecialThanks(){
				uni.navigateTo({
					url:"./specialThanks"
				})
			},
			skinToBlack(){
				uni.showToast({
					icon:"error",
					title:"开发中"
				})
			},
			saveLife(){
				uni.showToast({
					icon:"error",
					title:"开发中"
				})
			},
			loadLife(){
				uni.showToast({
					icon:"error",
					title:"开发中"
				})
			},
		},
		computed:{
			
		}
	}
</script>

<style>
	@import url("./light.css");
	.propbtn{
		display:inline-block;
	}
	.propinput{
		display:inline-block;
	}
	.propinitial-list{
		display:block;
	}
	.propinput{
		width:100rpx;
		overflow: inherit;
	}
	page{
		height:100%;
	}
</style>
